<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>SN码查询</title>
        <script src="js/jquery.min.js"></script>
        <script src="js/jsQR.min.js"></script>
        <link href="css/all.min.css" rel="stylesheet">
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
                background-color: #f5f5f5;
                color: #333;
                line-height: 1.5;
                padding: 15px;
            }

            .logo-container {
                width: 100%;
                text-align: center;
            }

            .logo-img {
                max-width: 100%;
                height: auto;
                width: 400px;
            }

            .search-bar {
                margin-bottom: 15px;
            }

            .combined-input {
                display: flex;
                margin-bottom: 10px;
                border-radius: 4px;
                overflow: hidden;
                border: 1px solid #ddd;
                background: white;
            }

            .filter-container {
                position: relative;
                border-right: 1px solid #ddd;
            }

            .filter-select {
                height: 44px;
                padding: 0 30px 0 15px;
                border: none;
                font-size: 16px;
                background-color: transparent;
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                color: #333;
                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
                background-repeat: no-repeat;
                background-position: right 10px center;
                background-size: 16px;
                cursor: pointer;
            }

            .filter-select:focus {
                outline: none;
            }

            .search-input-container {
                position: relative;
                flex: 1;
            }

            .search-input {
                width: 100%;
                height: 44px;
                padding: 0 40px 0 15px;
                border: none;
                font-size: 16px;
            }

            .search-input:focus {
                outline: none;
            }

            .scan-icon {
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
                cursor: pointer;
                font-size: 20px;
                color: #666;
            }

            .search-btn {
                width: 100%;
                height: 44px;
                background-color: #1890ff;
                color: white;
                border: none;
                border-radius: 4px;
                font-size: 16px;
                cursor: pointer;
                transition: background-color 0.3s;
            }

            .search-btn:hover {
                background-color: #40a9ff;
            }

            .search-btn:disabled {
                background-color: #d9d9d9;
                cursor: not-allowed;
            }

            .logout-btn {
                width: 100%;
                height: 44px;
                background-color: #f0f0f0; /* 浅灰色背景 */
                color: #666; /* 深灰色文字 */
                border: 1px solid #ddd; /* 浅灰色边框 */
                border-radius: 4px;
                font-size: 16px;
                cursor: pointer;
                transition: all 0.3s ease;
                margin-top: 50px;
            }

            .logout-btn:hover {
                background-color: #e6e6e6; /* 悬停时稍深的灰色 */
                color: #333; /* 悬停时文字变深 */
                border-color: #ccc;
            }

            .logout-btn:active {
                background-color: #d9d9d9; /* 点击时更深的灰色 */
                transform: translateY(1px);
            }

            .result-panel {
                background: white;
                border-radius: 8px;
                padding: 15px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            }

            .result-item {
                display: flex;
                margin-bottom: 12px;
            }

            .result-label {
                width: 80px;
                color: #666;
            }

            .result-value {
                flex: 1;
                font-weight: 500;
            }

            .error-message {
                color: #f5222d;
                text-align: center;
                padding: 10px;
                font-size: 16px;
            }

            .loading {
                display: inline-block;
                width: 20px;
                height: 20px;
                border: 3px solid rgba(255,255,255,.3);
                border-radius: 50%;
                border-top-color: #fff;
                animation: spin 1s ease-in-out infinite;
                margin-left: 10px;
                vertical-align: middle;
            }

            @keyframes spin {
                to { transform: rotate(360deg); }
            }

            /* 扫码模态框样式 - 已调整高度 */
            .scan-modal {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.8);
                z-index: 1000;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }

            .scan-container {
                width: 90%;
                max-width: 400px;
                background: white;
                border-radius: 8px;
                padding: 15px;
                text-align: center;
            }

            .scan-title {
                font-size: 16px;
                margin-bottom: 10px;
                color: #333;
            }

            #scan-video {
                width: 100%;
                height: 200px; /* 缩小了高度 */
                border-radius: 4px;
                margin-bottom: 10px;
                background: #000;
                object-fit: cover; /* 保持视频比例 */
            }

            .scan-actions {
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
            }

            .scan-btn {
                padding: 8px 15px;
                border-radius: 4px;
                border: none;
                font-size: 14px;
                cursor: pointer;
            }

            .scan-cancel {
                background: #f5f5f5;
                color: #333;
            }

            .scan-confirm {
                background: #1890ff;
                color: white;
            }

            .scan-result {
                margin-top: 8px;
                padding: 8px;
                background: #f5f5f5;
                border-radius: 4px;
                font-size: 14px;
                display: none;
            }

            .logout-btn.clicked {
                transform: scale(0.98);
                opacity: 0.9;
            }
        </style>
    </head>
    <body>
        <div class="logo-container">
            <img src="img/logo222.png" class="logo-img"/>
        </div>
        <div class="search-bar">
            <div class="combined-input">
                <div class="filter-container">
                    <select class="filter-select" id="locationSelect">
                        <option value="">请选择</option>
                        <option value="box">外盒</option>
                        <option value="device">机身</option>
                    </select>
                </div>

                <div class="search-input-container">
                    <input type="text" id="snInput" class="search-input" placeholder="请输入条码号">
                    <span class="scan-icon" id="scanBtn"><i class="fa-solid fa-qrcode"></i></span>
                </div>
            </div>

            <button class="search-btn" id="queryBtn">查询</button>
        </div>

        <div class="result-panel" id="resultPanel">
            <div id="errorMessage" class="error-message" style="display: none;"></div>

            <div class="result-item">
                <div class="result-label">系列：</div>
                <div class="result-value" id="seriesResult">-</div>
            </div>
            <div class="result-item">
                <div class="result-label">型号：</div>
                <div class="result-value" id="modelResult">-</div>
            </div>
            <!-- 新增的外盒SN码展示 -->
            <div class="result-item" id="boxSnItem" style="display: none;">
                <div class="result-label">外盒SN码：</div>
                <div class="result-value" id="boxSnResult">-</div>
            </div>
            <div class="result-item">
                <div class="result-label">销售地：</div>
                <div class="result-value" id="regionResult">-</div>
            </div>
        </div>

        <button class="logout-btn" id="logout">退出登录</button>



        <!-- 扫码模态框 -->
        <div class="scan-modal" id="scanModal">
            <div class="scan-container">
                <div class="scan-title">扫描二维码/条形码</div>
                <video id="scan-video" playsinline></video>
                <div class="scan-result" id="scanResult"></div>
                <div class="scan-actions">
                    <button class="scan-btn scan-cancel" id="scanCancel">取消</button>
                    <button class="scan-btn scan-confirm" id="scanConfirm" disabled>确认</button>
                </div>
            </div>
        </div>

        <script>
            $(document).ready(function() {
                // 扫码相关变量
                let scanStream = null;
                let scanResult = null;
                let scanInterval = null;

                // 显示扫码模态框
                function showScanModal() {
                    $('#scanModal').css('display', 'flex');
                    $('#scanResult').hide();
                    $('#scanConfirm').prop('disabled', true);
                    scanResult = null;

                    // 启动摄像头
                    startCamera();
                }

                // 隐藏扫码模态框
                function hideScanModal() {
                    $('#scanModal').hide();
                    stopCamera();
                }

                // 启动摄像头
                function startCamera() {
                    navigator.mediaDevices.getUserMedia({
                        video: {
                            facingMode: "environment",
                            width: { ideal: 1280 },
                            height: { ideal: 720 }
                        }
                    }).then(function(stream) {
                        scanStream = stream;
                        const video = document.getElementById('scan-video');
                        video.srcObject = stream;
                        video.play();

                        // 开始扫描
                        scanQRCode();
                    }).catch(function(err) {
                        showError('无法访问摄像头: ' + err.message);
                        hideScanModal();
                    });
                }

                // 停止摄像头
                function stopCamera() {
                    if (scanStream) {
                        scanStream.getTracks().forEach(track => track.stop());
                        scanStream = null;
                    }
                    if (scanInterval) {
                        clearInterval(scanInterval);
                        scanInterval = null;
                    }
                }

                // 扫描二维码
                function scanQRCode() {
                    const video = document.getElementById('scan-video');
                    const canvas = document.createElement('canvas');
                    const context = canvas.getContext('2d');

                    function tick() {
                        if (video.readyState === video.HAVE_ENOUGH_DATA) {
                            canvas.width = video.videoWidth;
                            canvas.height = video.videoHeight;
                            context.drawImage(video, 0, 0, canvas.width, canvas.height);

                            const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
                            const code = jsQR(imageData.data, imageData.width, imageData.height, {
                                inversionAttempts: "dontInvert",
                            });

                            if (code) {
                                // 找到二维码
                                scanResult = code.data;
                                $('#scanResult').text(scanResult).show();
                                $('#scanConfirm').prop('disabled', false);
                                //调用确定按钮
                                $('#scanConfirm').click();
                                // 停止扫描
                                return;
                            }
                        }

                        // 继续扫描
                        requestAnimationFrame(tick);
                    }

                    tick();
                }

                // 扫一扫按钮点击事件
                $('#scanBtn').click(function() {
                    showScanModal();
                });

                // 扫码取消按钮
                $('#scanCancel').click(function() {
                    hideScanModal();
                });

                // 扫码确认按钮
                $('#scanConfirm').click(function() {
                    if (scanResult) {
                        $('#snInput').val(scanResult);
                        hideScanModal();
                    }
                });

                // 查询功能
                $('#queryBtn').click(function() {

                    //下拉选择必须选择
                    const location = $('#locationSelect').val();
                    if (!location) {
                        showError('请选择外盒或机身');
                        return;
                    }

                    const sn = $('#snInput').val().trim();
                    if (!sn) {
                        showError('请输入SN码');
                        return;
                    }



                    const $btn = $(this);
                    $btn.prop('disabled', true);
                    $btn.html('查询中<span class="loading"></span>');

                    // 隐藏之前的错误信息
                    hideError();

                    // 调用查询接口
                    $.ajax({
                        url: '/renren-admin/prd/front/query',
                        type: 'GET',
                        data: {
                            sn: sn,
                            location: location
                        },
                        success: function(response) {
                            if (response.code === 0) {
                                // 显示查询结果
                                $('#seriesResult').text(response.data.series || '-');
                                $('#modelResult').text(response.data.productName || '-');
                                $('#regionResult').text(response.data.area || '-');
                                // 新增逻辑：如果是机身查询，显示外盒SN码
                                if (location === 'device' && response.data.boxSn) {
                                    $('#boxSnItem').show();
                                    $('#boxSnResult').text(response.data.boxSn);
                                } else {
                                    $('#boxSnItem').hide();
                                }
                            } else {
                                showError(response.msg || '查询失败');
                                // 清空结果
                                $('#seriesResult').text('-');
                                $('#modelResult').text('-');
                                $('#regionResult').text('-');
                                $('#boxSnItem').hide();
                                $('#boxSnResult').text('-');
                            }
                        },
                        error: function(xhr) {
                            let errorMsg = '网络错误，请稍后重试';
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                errorMsg = xhr.responseJSON.message;
                            }
                            showError(errorMsg);
                            // 清空结果
                            $('#seriesResult').text('-');
                            $('#modelResult').text('-');
                            $('#regionResult').text('-');
                            $('#boxSnItem').hide();
                            $('#boxSnResult').text('-');
                        },
                        complete: function() {
                            $btn.prop('disabled', false);
                            $btn.text('查询');
                        }
                    });
                });

                // 回车键查询
                $('#snInput').keypress(function(e) {
                    if (e.which === 13) {
                        $('#queryBtn').click();
                    }
                });

                // 显示错误信息
                function showError(message) {
                    $('#errorMessage').text(message).show();
                }

                // 隐藏错误信息
                function hideError() {
                    $('#errorMessage').hide();
                }

                $('#logout').click(function() {
                    $(this).addClass('clicked'); // 可以添加点击动画类
                    setTimeout(() => {
                        window.location.href = 'login.html';
                    }, 300); // 延迟300毫秒让动画完成
                });

            });
        </script>
    </body>
</html>
